<script setup>
import { ref, toRaw } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import Type from '@components/search/type';
import Search from '@components/search/index';
import PageWrapper from '@components/PageWrapper.vue';
import { common, service } from '@utils';
import { Plus, TurnOff, Open, View, Delete } from '@element-plus/icons-vue';
import { usePremission, useRole } from '@hooks';
import Detail from './Detail';
const premission = usePremission({
    view: 'member:user:getUser',
    disable: 'member:user:disable',
    enable: 'member:user:enable',
    delete: 'member:user:delete',
});

const searchs = ref([
    {
        type: Type.INPUT,
        key: 'userId',
        width: 4,
        placeholder: '用户id',
    },
    {
        type: Type.INPUT,
        key: 'name',
        width: 3,
        placeholder: '姓名',
        likes: true,
    },
    {
        type: Type.INPUT,
        key: 'mobile',
        width: 4,
        placeholder: '手机号码',
    },
    {
        type: Type.INPUT,
        key: 'userIdCard',
        width: 5,
        placeholder: '身份证号码',
    },
    {
        type: Type.SELECT,
        key: 'hasUploadIdCard',
        width: 3,
        valueKey: 'value',
        data: [],
        placeholder: '有无身份证',
    },
    {
        width: 5,
        type: Type.SEARCH_BUTTON,
    },
]);

const pageRef = ref();
const tableRef = ref();
const types = ref([]);
const detailRef = ref();

let queryForm = {};

const onSearch = param => {
    queryForm = param;
    pageRef.value.refresh();
};

const getData = async ({ pageNum, pageSize }, cb) => {
    const res = await service.bfqz.users(pageNum, pageSize, queryForm);
    cb(res);
    setTimeout(() => {
        tableRef.value.scrollTo(0, 0);
    }, 0);
};

const getTypes = async () => {
    const res = await service.auth.sysdirectListbyCode({ code: 'yesNo' });
    if (res) {
        res.forEach(item => {
            if (item.value == 'true') {
                item.value = true;
            } else {
                item.value = false;
            }
            types.value.push(item);
            searchs.value[4].data.push(item);
        });
    }
};

const showDetail = async row => {
    detailRef.value.open(row);
};

const changeState = async (row, type) => {
    let res;
    if (!type) {
        res = await service.bfqz.userDisable({ userId: row.userId });
    } else {
        res = await service.bfqz.userEnable({ userId: row.userId });
    }
    res && pageRef.value.refresh(true);
};

const deleteRow = async row => {
    ElMessageBox.confirm('是否删除此记录', '提示', {
        type: 'warning',
    }).then(async () => {
        const res = await service.bfqz.userRemove(row.userId);
        if (res) {
            ElMessage.success('删除成功');
            pageRef.value.refresh(true);
        }
    });
};
getTypes();

const width = (function (premission) {
    let width = 24;
    premission.view && (width += 33);
    premission.disable && (width += 33);
    premission.enable && (width += 33);
    premission.delete && (width += 33);
    return Math.max(width, 72);
})(premission);
</script>
<template>
    <section class="main-white">
        <search :items="searchs" @filter="onSearch" />
        <div class="margin-bottom10" v-if="premission.add">
            <el-button type="primary" :icon="Plus" @click="showEdit()">添加</el-button>
        </div>
        <page-wrapper @get-data="getData" ref="pageRef">
            <template v-slot:default="props">
                <vxe-table ref="tableRef" :loading="props.loading" :data="props.tableData.records" :max-height="common.tableHeight(true, 1)" class="mytable-scrollbar" highlight-hover-row round stripe border>
                    <vxe-column type="seq" width="60"></vxe-column>
                    <vxe-column field="userId" title="用户id" width="160" />
                    <vxe-column field="name" title="姓名" width="100" />
                    <vxe-column field="createTime" title="注册时间" width="160" />
                    <vxe-column field="mobile" title="手机号码" width="150" />
                    <vxe-column field="userIdCard" title="身份证" width="170" />
                    <!-- <vxe-column title="锁定状态">
                        <template #default="{ row }">
                            <el-tag>
                                {{ common.getValueByKey('val', row.state, types, 'label') }}
                            </el-tag>
                        </template>
                    </vxe-column> -->
                    <vxe-column title="是否有身份证" width="170">
                        <template #default="{ row }">
                            {{ common.getValueByKey('value', row.hasUploadIdCard, types, 'label') }}
                        </template>
                    </vxe-column>
                    <vxe-column title="操作" :min-width="width" fixed="right">
                        <template #default="{ row }">
                            <section class="flex-align flex-wrap">
                                <el-tooltip v-if="premission.view" effect="dark" content="详情" placement="top" :enterable="false">
                                    <el-button type="primary" plain :icon="View" size="small" @click="showDetail(row)"></el-button>
                                </el-tooltip>
                                <div class="marginL12" style="margin-right: 12px">
                                    <el-tooltip v-if="row.status && premission.disable" effect="dark" content="禁用" placement="top" :enterable="false">
                                        <el-button type="danger" :icon="TurnOff" size="small" circle @click="changeState(row, 0)"></el-button>
                                    </el-tooltip>
                                    <template v-else>
                                        <el-tooltip v-if="premission.enable" effect="dark" content="启用" placement="top" :enterable="false">
                                            <el-button type="success" :icon="Open" size="small" circle @click="changeState(row, 1)"></el-button>
                                        </el-tooltip>
                                    </template>
                                </div>
                                <el-tooltip v-if="premission.delete" effect="dark" content="删除" placement="top" :enterable="false">
                                    <el-button type="danger" :icon="Delete" size="small" circle @click="deleteRow(row)"></el-button>
                                </el-tooltip>
                            </section>
                        </template>
                    </vxe-column>
                </vxe-table>
            </template>
        </page-wrapper>
        <detail ref="detailRef" :types="types" />
    </section>
</template>
